<template>
  <div class="articles-area" style="height:auto;width: 1000px;margin:0 auto;">
    <el-card style="text-align: left;width: 990px;margin: 35px auto 0 auto">
      <div>
        <span style="font-size: 20px"><strong>{{question.title}}</strong></span>
        <div style="margin-top: 10px;font-size: 15px;font-family: Hiragino Sans GB;">{{question.createTime | dateFmt('YYYY-MM-DD')}} by <span style="color:#409EFF;">{{ question.authorName }}</span></div>
        <el-button type="warning" icon="el-icon-star-off" style="font-size:3px;float:right;margin-top:-45px" @click.native="collect(question.id)" circle :disabled="disabled"></el-button>
        <el-divider style="margin-top: 15px;"></el-divider>
        <div class="markdown-body">
          <div v-html="question.content"></div>
        </div>
        <el-divider></el-divider>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
        <div style="float:right;margin-top:20px; margin-bottom:20px;"><el-button type="primary" @click="commentQuestion()">提交评论</el-button></div>
      </div>

      <div class="comment-area" style="margin-top:90px;">
                <el-card style="text-align: left;">
                  <span><h5><strong>评论列表</strong></h5></span>
                  <el-divider></el-divider>
                   <div style="margin:0 auto">{{ msg }}</div>
                  <div v-for="comment in comments" :key="comment.uid">
                      <el-avatar shape="square"
                      style="border-radius: 5px; margin-right:150px;"
                      :src="comment.userAvatar"></el-avatar>
                    <div style="float:left;width:85%;height:20px; margin-left: 50px; margin-top:-49px;">
                      <div class="article-link" :to="{path:'question/details',query:{id: comment.id}}"><span style="font-size: 20px;"><strong>{{comment.userName}}</strong></span></div>
                      <div>
                        <span>{{ comment.content }}</span>
                        <span  style="float:right;margin-top:0px; color:#67C23A;"><p>{{comment.createTime | dateFmt('YYYY-MM-DD')}}</p></span>
                        </div>
                    </div>
                    <el-divider></el-divider>

                  </div>
                </el-card>
                <div style="text-align:center;padding:10px;">
                  <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total">`
                </el-pagination>
                </div>

      </div>
    </el-card>
  </div>
</template>

<script>

  export default {
    name: 'BlogDetails',
    inject:['reload'],
    data () {
      return {
        question: [],
        textarea: '',
        comments: [],
        msg:'',
        pageSize: 4,
        total: 0,
        disabled:false
      }
    },
    mounted () {
      this.loadQuestion(),
      this.loadComment(),
      this.isCollect()
    },
    methods: {
      loadQuestion () {
        var _this = this
        this.$axios.get('/blog/details/' + this.$route.query.id).then(resp => {
          if (resp && resp.data.code === 200) {
            _this.question = resp.data.data;
          }
        })
      },
      loadComment(){
        var _this = this
        this.$axios.get('/question/comment/' + this.$route.query.id+'/'+this.pageSize+'/1' + '/2').then(resp => {
          if (resp && resp.data.code === 200) {
            _this.comments = resp.data.data.records
            _this.total = resp.data.data.total
            if(_this.comments == undefined ||_this.comments == null || _this.comments.length <= 0){
            _this.msg = "还没有人评论哟，快来评论吧"
            }else{
            _this.msg = ''
           }
          }
        })
      },
       handleCurrentChange (page) {
                var _this = this
                this.$axios.get('/question/comment/' + this.$route.query.id+'/'+this.pageSize+'/'+ page + '/2').then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.comments = resp.data.data.records
                    _this.total = resp.data.data.total
                  }
                })
              },
      commentQuestion(){
        var _this = this;
        this.$axios.post('/question/comment',{
          qid:this.$route.query.id,
          content:this.textarea,
          topicCategory: "2",
          topicTitle: this.question.title
        }).then(resp => {
          if (resp && resp.data.code === 200) {
            _this.textarea = '';
            _this.comments = resp.data.data.records
            _this.total = resp.data.data.total
          }
        })
      },
      collect(id){
        var _this = this
        this.$axios.put('/blog/'+id+'/favorite')
        .then(resp=>{
          if(resp.data.code === 200){
            _this.disabled = true;
          }else{
            _this.disabled = false;
          }
        })
        .catch(function (error) {
        })

      },
      isCollect(){
        var _this = this
        this.$axios.get('/blog/'+this.$route.query.id+'/favorite')
        .then(resp=>{
          if(resp.data.code === 200){
            _this.disabled = true;
          }else{
            _this.disabled = false;
          }
        })
        .catch(function (error) {
        })
      }
    }

  }
</script>

<style scoped>
  @import "../../styles/markdown.css";
</style>
